<template>

  <el-row :gutter="40" class="panel-group"
          style="border: 1px solid gray;margin-left: 0px;margin-right: 0px;display: flex;flex-direction: column; ">

    <div>
      <div
        style=" display: flex;justify-content: space-between; margin-left: 20px;margin-top: 5px;margin-bottom: 5px;margin-right: 20px">
        <div style="">
          <i class="el-icon-data-line"></i>
          <span style="font-size: 14px;color: #303133;margin-left: 5px;">代办统计</span>
          <span style="font-size: 12px;color: #909399; margin-left: 20px;">统计日期{{ getTime() }}</span>
        </div>
        <right-toolbar :search="search" @queryTable="init()" style=" margin-right: 20px;"></right-toolbar>
        <!-- <div style="cursor: pointer; margin-right: 20px;" @click="getUncheck()">
          <i class="el-icon-refresh"></i>
          <span>刷新</span>

        </div> -->
      </div>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/check/userCheck')">
          <div class="card-panel-icon-wrapper icon-check">
            <svg-icon icon-class="check" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              认证审核
            </div>
            <count-to :start-val="0" :end-val="uncheck.userCheck" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/moments/moments')">
          <div class="card-panel-icon-wrapper icon-moments">
            <svg-icon icon-class="moments" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              动态审核
            </div>
            <count-to :start-val="0" :end-val="uncheck.moments" :duration="3000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/moments/likeWall')">
          <div class="card-panel-icon-wrapper icon-wall">
            <svg-icon icon-class="wall" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              贴贴墙审核
            </div>
            <count-to :start-val="0" :end-val="uncheck.likeWall" :duration="3200" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/pay/payWithdraw')">
          <div class="card-panel-icon-wrapper icon-withdraw">
            <svg-icon icon-class="withdraw" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              提现审核
            </div>
            <count-to :start-val="0" :end-val="uncheck.withdraw" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/call/callVoiceCheck')">
          <div class="card-panel-icon-wrapper icon-record">
            <svg-icon icon-class="record" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              录音审核
            </div>
            <count-to :start-val="0" :end-val="uncheck.voiceCheck" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>


      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/feedback/userFeedback')">
          <div class="card-panel-icon-wrapper icon-feedback">
            <svg-icon icon-class="feedback" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              投诉反馈
            </div>
            <count-to :start-val="0" :end-val="uncheck.feedBack" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </div>


    <div>
      <div
        style="margin: 5px; display: flex;justify-content: space-between;margin-left: 20px;margin-top: 5px;margin-bottom: 5px">
        <div style="margin-left: 10px;">
          <i class="el-icon-data-line"></i>
          <span style="font-size: 14px;color: #303133;margin-left: 5px;">概要统计</span>
          <span style="font-size: 12px;color: #909399; margin-left: 20px;">统计日期{{ getTime() }}</span>
        </div>
      </div>
      <div
        style="display: flex; flex-direction: row; margin-left: 20px;margin-top: 5px;margin-bottom: 5px;margin-right: 20px">
        <el-table :data="today" :span-method="objectSpanMethod" :border="true" style="width: 30%; "
                  :cell-style="cellStyle" :show-header="false">
          <el-table-column prop="name" label="name" width="180" align="center">
          </el-table-column>
          <el-table-column prop="c1" label="c1" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-direction: row;justify-content: center">
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c1.key }}：</span>
                <el-statistic group-separator="," :precision="scope.row.c1.precision" :value="scope.row.c1.value"
                              :value-style="{ color: 'red' }" style="width: auto;"></el-statistic>
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c1.unit }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="c2" label="c2" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-direction: row;justify-content: center">
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c2.key }}：</span>
                <el-statistic group-separator="," :precision="scope.row.c2.precision" :value="scope.row.c2.value"
                              :value-style="{ color: 'red' }" style="width: auto;"></el-statistic>
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c2.unit }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="yesterday" :span-method="objectSpanMethod" :border="true" style="width: 30%; "
                  :cell-style="cellStyle" :show-header="false">
          <el-table-column prop="name" label="name" width="180" align="center">
          </el-table-column>
          <el-table-column prop="c1" label="c1" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-direction: row;justify-content: center">
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c1.key }}：</span>
                <el-statistic group-separator="," :precision="scope.row.c1.precision" :value="scope.row.c1.value"
                              :value-style="{ color: 'red' }" style="width: auto;"></el-statistic>
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c1.unit }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="c2" label="c2" align="center">
            <template slot-scope="scope">
              <div style="display: flex;flex-direction: row;justify-content: center">
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c2.key }}：</span>
                <el-statistic group-separator="," :precision="scope.row.c2.precision" :value="scope.row.c2.value"
                              :value-style="{ color: 'red' }" style="width: auto;"></el-statistic>
                <span style="font-size: 14px;color: #909399;">{{ scope.row.c2.unit }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>

    </div>

  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import moment from 'moment'
import {indexOutline, indexUnCheck} from "@/api/service/index/analyse";

export default {
  components: {
    CountTo
  },
  data() {
    return {
      // 显示搜索条件
      search: false,
      today: [{
        name: '今日统计',
        c1: {
          value: 0, key: '充值金额', precision: 2, unit: '元'
        },
        c2: {
          value: 0, key: '通话分钟', precision: 0, unit: '分钟'
        }
      }, {
        name: '今日统计',
        c1: {
          value: 0, key: '提现金额', precision: 2, unit: '元'
        },
        c2: {
          value: 0, key: '注册人数', precision: 0, unit: '人'
        }
      }],
      yesterday: [{
        name: '昨日统计',
        c1: {
          value: 0, key: '充值金额', precision: 2, unit: '元'
        },
        c2: {
          value: 0, key: '通话分钟', precision: 0, unit: '分钟'
        }
      }, {
        name: '昨日统计',
        c1: {
          value: 0, key: '提现金额', precision: 2, unit: '元'
        },
        c2: {
          value: 0, key: '注册人数', precision: 0, unit: '人'
        }
      }],
      uncheck: {}
    }
  },
  created() {
    this.init()
  },
  methods: {

    init() {
      this.getUncheck();
      this.getIndexOutline();
    },

    cellStyle({row, column, rowIndex, columnIndex}) {
      if (column.label === 'name') {
        // 返回样式对象
        return {backgroundColor: '#f5f7fa', color: '#909399', fontSize: '14px'};
      }
      // 或者返回空对象，表示不应用任何样式
      return {};
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    getTime() {
      return moment().format('YYYY-MM-DD HH:mm:ss');
    },
    getUncheck() {
      this.loading = true;
      indexUnCheck({}).then(response => {
        this.uncheck = response.data
      });
    },
    getIndexOutline() {
      this.loading = true;
      indexOutline({}).then(response => {
        this.today[0].c1.value = response.data.sumTodayRecharge;
        this.today[0].c2.value = response.data.sumTodayCall;

        this.today[1].c1.value = response.data.sumTodayWithdraw;
        this.today[1].c2.value = response.data.sumTodayReg;

        this.yesterday[0].c1.value = response.data.sumyesterdayRecharge;
        this.yesterday[0].c2.value = response.data.sumyesterdayCall;

        this.yesterday[1].c1.value = response.data.sumyesterdayWithdraw;
        this.yesterday[1].c2.value = response.data.sumyesterdayReg;

      });
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-feedback {
        background: #1296db;
      }

      .icon-record {
        background: #1296db;
      }


      .icon-wall {
        background: #0088FF;
      }

      .icon-moments {
        background: #3B8EDE;
      }

      .icon-check {
        background: #3AA5FF;
      }

      .icon-withdraw {
        background: #1296db;
      }


    }

    .icon-feedback {
      color: #1296db;
    }

    .icon-record {
      color: #1296db;
    }

    .icon-withdraw {
      color: #1296db;
    }

    .icon-wall {
      color: #0088FF;
    }

    .icon-moments {
      color: #3B8EDE;
    }

    .icon-check {
      color: #17ee78;
    }


    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
